import {useState,useEffect} from 'react';
import './fuwu.css'
import axios from 'axios'
const { RangePicker } = DatePicker;
import { useNavigate } from 'react-router-dom'
import { DatePicker, Select,Switch, Form, Divider, Radio, Table, Input, Button, Space } from 'antd';
import { SearchOutlined, RollbackOutlined, AppstoreOutlined, EditOutlined,DeleteOutlined } from '@ant-design/icons';
const onOk = (value) => {
    console.log('onOk: ', value);
};
const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};



export default function Fuwu() {
    const columns = [
        {
            title: '服务人员信息',
            dataIndex: 'name',
        },
        {
            title: '服务人员ID',
            dataIndex: '_id',
        },
        {
            title: "服务类型",
            dataIndex: 'cateId',
            render: (_, record) => record.cateId ? record.cateId.name : '未知'
        },
        {
            title: '标签',
            dataIndex: 'tagId',
            render: (text) => text ? text.name : '未知'
        },
        {
            title: '负责区域',
            dataIndex: 'address'
        },
        {
            title: '加入方式',
            dataIndex: 'register',
        },
        {
            title: "加入时间",
            dataIndex: 'time',
            render: (text) => <a>{formatDate(text)}</a>
        },
        {
            title: '状态',
            dataIndex: 'status',
            //使用按钮渲染状态
            
            render: (text)=> <Space direction="vertical">
                 <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
            </Space>
        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            render: (_, record) => <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                <Button size='small' icon={<EditOutlined />} />
                <Button size='small' icon={<DeleteOutlined />} onClick={() => deleteServiceProvider(record._id)}  />
            </div>
        }
    ];
    const navigate = useNavigate()
    const [list,setList]=useState([])
    useEffect(()=>{
        getlist()
    },[])
    const getlist=()=>{
        axios.get(`http://localhost:3000/csc/services`).then((res)=>{
            console.log('获取数据成功', res.data.data)
            setList(res.data.data)
        })
    }
    const deleteServiceProvider = (id) => {
        if (window.confirm('确定要删除该服务人员吗？')) {
            axios.delete(`http://localhost:3000/csc/sevredel?id=${id}`)
              .then(() => {
                    console.log('删除成功');
                    getlist(); // 删除成功后重新获取列表
                })
              .catch((error) => {
                    console.error('删除失败', error);
                });
        }
    };
    return (
        <div className='csc_fuquan'>
            <div className="csc_fuwaihezi">
                <div className="csc_fudiv1">
                    <div >
                        <span className="csc_fukuai"></span>
                        <span className='csc_fuspan1'>全部服务人员</span>
                    </div>
                    <div>
                        <div className="csc_fuselect">
                            <Form.Item label="服务类型" >
                                <Select placeholder="请选择" className='csc_fuselect2'>
                                    <Select.Option value="demo">Demo</Select.Option>
                                </Select>

                            </Form.Item>
                        </div>
                        <div className="csc_fuselect3">
                            <Form.Item label="标签" >
                                <Select placeholder="请选择" className='csc_fuselect2'>
                                    <Select.Option value="demo">Demo</Select.Option>
                                </Select>

                            </Form.Item>
                        </div>
                        <div className="csc_fudate">
                            <span className='csc_fuzhu'>加入日期</span>
                            <Space direction="vertical" size={12}>
                                <RangePicker
                                    showTime={{
                                        format: 'HH:mm',
                                    }}
                                    format="YYYY-MM-DD HH:mm"
                                    onChange={(value, dateString) => {
                                        console.log('Selected Time: ', value);
                                        console.log('Formatted Selected Time: ', dateString);
                                    }}
                                    onOk={onOk}
                                />
                            </Space>
                        </div>
                        <div className="csc_fuinput">
                            <Input placeholder="请输入关键字" className='csc_fuinput1' />
                            <Button type="primary" icon={<SearchOutlined />} className='csc_fubutton' />
                            <Button icon={<RollbackOutlined />} className='csc_fubutton' />
                        </div>
                    </div>
                </div>
                <div className="csc_fudiv2">
                    <div className="csc_fubtn1">
                        <span className="csc_fubutton4">
                            <Button color="cyan" variant="solid" className='csc_fubutton5' onClick={() => navigate('/zhu/navpage/fuwuadd')}>新增</Button>
                            <Button color="cyan" variant="outlined" className='csc_fubutton5'>批量删除</Button>
                        </span>
                    </div>
                    <div className='csc_futable'>
                        <Table
                            rowSelection={{
                            }}
                            columns={columns}
                            dataSource={list}
                        />
                    </div>
                </div>
            </div>
            
        </div>
    )
}